<template>
  <div id="todo_list" class="panel panel-info">
    <div class="panel-heading">
      <strong>代办任务列表</strong>
      <span class="label label-info">{{finished}}</span> / <span class="badge">{{total}}</span>
      <div class="btn-group btn-group-xs pull-right">
        <button type="button" class="btn btn-default" v-on:click="handleSaveTodo">保存到本地</button>
        <button type="button" class="btn btn-default" v-on:click="handleClearTodo">清空本地数据</button>
      </div>
      <div class="clearfix"></div>
    </div>
    <ul class="list-group">
      <li class="list-group-item" v-bind:class="{disabled: todo.finished}" v-for="(todo, index) in todos" v-bind:key="index">
        <span>
          <label><input type="checkbox" v-on:click="handleChangeTodo(index)" v-model="todo.finished" /> {{todo.content}}</label>
        </span>
        <div class="btn-group pull-right">
          <a href="#" v-on:click="handleDelTodo(index)"><span class="glyphicon glyphicon-trash"></span></a>
          <!--<a href="#"><span class="glyphicon glyphicon-edit"></span></a>-->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'todo_list',
  props: ['todos', 'total', 'finished'],
  methods: {
    handleDelTodo(index) {
      this.$emit('on-del-todo', index)
    },
    handleChangeTodo(index) {
      this.$emit('on-change-todo', index)
    },
    handleSaveTodo() {
      this.$emit('on-save-todo')
    },
    handleClearTodo() {
      this.$emit('on-clear-todo')
    }
  }
}
</script>

<style>
  #todo_list {
    margin-top: 20px;
  }
  #todo_list label {
    font-weight: normal;
    cursor: pointer;
  }
</style>


